<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background-color: skyblue;
				/*文字对齐方式*/
				text-align: center;
				/* 垂直对齐 */
				/*vertical-align: middle;*/
				/*行高和高度一致*/
				/*行高和字体大小有关
				 chrome 默认1.32倍
				 单行的垂直居中：行高和高度一致
				 撑起内容高度的不是字体大小，而是行高
				 
				 多行文字的垂直居中：
				 1.先设置父元素的行高和高度一致
				 2.设置子元素内部行高
				 行高有继承性 font/color否有继承性
				 * */
				line-height: 100px;
				font-size: 20px;
			}
			.box span{
				display: inline-block;
				vertical-align: middle;
				line-height: 1.32;
			}
			.box2{
				border: 2px solid black;
				margin-bottom: 50px;
			}
			.box2 span{
				vertical-align: top;
			}
			.box2 img{
				vertical-align: text-top;
			}
		</style>
	</head>
	<body>
		<div id="" class="box">
			<span id="">
				测试行高<br />
			测试行高<br />
			</span>
			
		</div>
		<a>
			ds
			<a>ds</a>
		</a>
		<div id="" class="box2">
			<img src="img/homepage_02.jpg"/>
			<span>
				图片
			</span>
		</div>
	</body>
</html>
